/* Style for the Home div */
.home {
    background-color: #000000;
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 750px;
    transition: all 120ms;
  }
  
  /* Style for illustration in home div */
  #illstration_1 {
    width: 100%;
    height: auto;
    grid-row: span 2;
  }
  
  .home img {
    height: 550px;
    width: 550px;
  }
  
  .home_col-lg-12 {
    width: 100%;
    height: 220px;
    padding-top: 110px;
    padding-left: 80px;
    grid-row: 1;
    grid-column: 1;
  }
  
  .home h3 {
    position: absolute;
    font-size: 24px;
    text-align: left;
    color: #009393;
    font-weight: 700;
  }
  
  .stage {
    width: auto;
    margin-top: 15px;
    height: 100px;
  }
  
  .cubespinner {
    width: 500px;
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 8s;
    animation-name: spincube;
  
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 8s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 40px 40px 0;
    -moz-transform-origin: 40px 40px 0;
    -ms-transform-origin: 40px 40px 0;
    transform-origin: 40px 40px 0;
  }
  
  .cubespinner div {
    position: absolute;
    width: auto;
    height: 80px;
    text-align: left;
    color: #109393;
    font-family: 'Raleway', sans-serif;
    font-size: 60px;
    font-weight: 550;
  }
  
  .cubespinner .face1 {
    color: #f1c40f;
    -webkit-transform: translateZ(40px);
    -moz-transform: translateZ(40px);
    -ms-transform: translateZ(40px);
    transform: translateZ(40px);
    -webkit-backface-visibility: hidden;
  }
  
  .cubespinner .face2 {
    color: #fff;
    -webkit-transform: rotateX(90deg) translateZ(40px);
    -moz-transform: rotateX(90deg) translateZ(40px);
    -ms-transform: rotateX(90deg) translateZ(40px);
    transform: rotateX(90deg) translateZ(40px);
    -webkit-backface-visibility: hidden;
  }
  
  .cubespinner .face3 {
    color: #f85555;
    -webkit-transform: rotateX(180deg) translateZ(40px);
    -moz-transform: rotateX(180deg) translateZ(40px);
    -ms-transform: rotateX(180deg) translateZ(40px);
    transform: rotateX(180deg) translateZ(40px);
    -webkit-backface-visibility: hidden;
  }
  
  .cubespinner .face4 {
    color: #fff;
    -webkit-transform: rotateX(270deg) translateZ(40px);
    -moz-transform: rotateX(270deg) translateZ(40px);
    -ms-transform: rotateX(270deg) translateZ(40px);
    transform: rotateX(270deg) translateZ(40px);
    -webkit-backface-visibility: hidden;
  }
  
  /*Cubical Flipping or rotation*/
  @-webkit-keyframes spincube {
  
    from,
    to {
      -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
  
    15% {
      -webkit-transform: rotateX(90deg);
    }
  
    25% {
      -webkit-transform: rotateX(90deg);
    }
  
    40% {
      -webkit-transform: rotateX(180deg);
    }
  
    50% {
      -webkit-transform: rotateX(180deg);
    }
  
    65% {
      -webkit-transform: rotateX(270deg);
    }
  
    75% {
      -webkit-transform: rotateX(270deg);
    }
  
    95% {
      -webkit-transform: rotateX(360deg);
    }
  
    100% {
      -webkit-transform: rotateX(360deg);
    }
  }
  
  @keyframes spincube {
  
    from,
    to {
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      transform: rotateX(0deg);
    }
  
    15% {
      -webkit-transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  
    25% {
      -webkit-transform: rotateX(90deg);
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  
    40% {
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
  
    50% {
      -webkit-transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
      transform: rotateX(180deg);
    }
  
    65% {
      -webkit-transform: rotateX(270deg);
      -moz-transform: rotateX(270deg);
      -ms-transform: rotateX(270deg);
      transform: rotateX(270deg);
    }
  
    75% {
      -webkit-transform: rotateX(270deg);
      -moz-transform: rotateX(270deg);
      -ms-transform: rotateX(270deg);
      transform: rotateX(270deg);
    }
  
    90% {
      -webkit-transform: rotateX(360deg);
      -moz-transform: rotateX(360deg);
      -ms-transform: rotateX(360deg);
      transform: rotateX(360deg);
    }
  
    100% {
      -webkit-transform: rotateX(360deg);
      -moz-transform: rotateX(360deg);
      -ms-transform: rotateX(360deg);
      transform: rotateX(360deg);
    }
  }
  
  #name_descrip {
    color: #fff;
    margin: 110px;
  }
  
  /* code for home section ends here*/